<script
	lang="ts"
	setup
>
import { systemMessageIdDelete, systemMessageListGet } from '@/api'
import FullHeightTable from '@/components/FullHeightTable.vue'
import SubHeader from '@/components/SubHeader.vue'
import { useRenderAction } from '@/hooks/useRenderActions'
import { systemMessageColumns } from '@/tableColumns/system.message'
import type { OSystemMessageListGetItem } from '@/typed/response'
import { OSystemMessageListGetItemValue } from '@/typed/response.value'
import { mergeColumns } from '@/utils'
import AddMessageModal from '@/views/console/message/components/AddMessageModal.vue'
import EditMessageModal from '@/views/console/message/components/EditMessageModal.vue'
import ReadStatus from '@/views/console/message/components/ReadStatus.vue'
import SystemMessageDetail from '@/views/console/message/components/SystemMessageDetail.vue'
import { Add12Regular } from '@vicons/fluent'
import { type DataTableProps, NIcon } from 'naive-ui'
import { ref } from 'vue'

const table = ref()
const showDetail = ref(false)
const showEditModal = ref(false)
const showAddModal = ref(false)
const filterPrams = ref<any>({
	isRead: undefined,
})
const currentItem = ref<OSystemMessageListGetItem>({
	...OSystemMessageListGetItemValue
})

const tableProps = ref<DataTableProps>({
	scrollX: 1200,
	rowKey: (item) => item.id,
	columns: mergeColumns(systemMessageColumns?.filter((i: any) => i.key !== 'time' && i.key !== 'goodsType'), {
		end: [
			{
				title: '操作',
				key: 'actions',
				width: 250,
				fixed: 'right',
				align: 'center',
				render: item => useRenderAction([
					{
						label: '删除',
						type: 'error',
						round: true,
						onClick: () => onDelete(item)
					},
					{
						label: '修改',
						type: 'primary',
						round: true,
						onClick: () => {
							currentItem.value = item
							showEditModal.value = true
						}
					},
					{
						label: '详情',
						type: 'default',
						round: true,
						onClick: () => {
							currentItem.value = item;
							showDetail.value = true;
						}
					},
				])
			}
		]
	})
})

async function onDelete(item: OSystemMessageListGetItem) {
	window.$dialog.warning({
		title: '删除确认',
		content: '确定要删除该系统消息吗？',
		positiveText: '确定',
		negativeText: '取消',
		maskClosable: false,
		onPositiveClick: async () => {
			const { code } = await systemMessageIdDelete(item.id)
			if (code === 200) {
				window.$message.success('删除成功')
				table.value.reload()
			}
		},
	})
}

function reloadTable() {
	showEditModal.value = false
	showAddModal.value = false
	table.value.reload();
}

function closeEdit() {
	showEditModal.value = false;
	currentItem.value = {
		...OSystemMessageListGetItemValue
	}
}

</script>

<template>
	<n-layout>
		<sub-header>
			<template #right>
				<ReadStatus v-model:value="filterPrams.isRead"/>
				<n-button
					type="primary"
					@click="showAddModal=true"
				>
					<template #icon>
						<n-icon>
							<Add12Regular/>
						</n-icon>
					</template>
					添加消息
				</n-button>
			</template>
		</sub-header>
		<n-layout class="content">
			<FullHeightTable
				ref="table"
				:params="filterPrams"
				:table-props="tableProps"
				:table-request="systemMessageListGet"
			/>
		</n-layout>
		<SystemMessageDetail
			v-model:show="showDetail"
			:data="currentItem"
		/>
		<EditMessageModal
			:show="showEditModal"
			:data="currentItem"
			@cancel="closeEdit"
			@update:list="reloadTable"
		/>
		<AddMessageModal
			:show="showAddModal"
			@cancel="()=>showAddModal=false"
			@update:list="reloadTable"
		/>
	</n-layout>
</template>
<style
	lang="less"
	scoped
>
.content {
	padding: 0 20px 20px 20px;
}
</style>
